<template>
  <div class="page">
    <div class="filter-card">
      <div class="header">
        <div class="title">角色管理</div>
        <div style="float:right;margin-right:10px;">
          <el-button size="mini" @click="toRoleEdit()">新建角色</el-button>
        </div>
      </div>
      <div class="filter-form">
         <el-form inline size="mini" style="display:flex;">
          <el-form-item label="角色名称"  class="baseFlex">
            <el-input placeholder="请输入角色名称" v-model="filterForm.roleName" clearable style="width:300px;"></el-input>
          </el-form-item>
          <el-form-item style="text-align: right;">
            <el-button type="primary" @click="setFilter">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>

       
      </div>
    </div>

    <div class="table-card">
      <el-table align="center" :data="tableData.lists">
        <el-table-column
          label="角色名称"
          prop="roleName"
        ></el-table-column>
        <!--        <el-table-column label="角色类型"></el-table-column>-->
        <!--        <el-table-column label="是否锁定"></el-table-column>-->
        <el-table-column
          label="描述"
          prop="roleDsc"
        ></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              plain
              size="mini"
              @click="toRoleEdit(scope.row,1)"
            >查看
            </el-button>
            <el-button
              plain
              size="mini"
              @click="toRoleEdit(scope.row,0)"
            >编辑
            </el-button>
            <el-button plain size="mini" @click="showDelDialog(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="flex-row flex-justify-between flex-align-center table-pagination">
        <div style="font-size: 12px">共{{tableData.total}}条</div>
        <el-pagination
          style="margin-left: -10px"
          background
          @current-change="fetchWithPagination"
          :current-page.sync="tableData.pageNumber"
          :page-size="tableData.pageSize"
          @size-change="fetchWithPageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="prev, pager, next,jumper"
          :total="tableData.total">
        </el-pagination>
      </div>
    </div>

    <el-dialog :visible.sync="delDialog" class="del-dialog" width="350px">
      <div class="flex-column flex-align-center flex-justify-around dialog-container">
        <img src="@/assets/images/del_icon.png" alt="">
        <span>删除后将不可恢复，确认删除该角色么？</span>
        <div>
          <el-button type="primary" size="mini" @click="confirmDel">确认</el-button>
          <el-button size="mini" @click="cancelDel">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'custom',
    data () {
      return {
        baseUrl: '/api/role/list',
        filterForm: {
          roleName: ''
        },
        tableData: {},
        delDialog: false,
        selectedRow: {}
      }
    },
    methods: {
      showDelDialog (row) {
        this.delDialog = true
        this.selectRow = row
      },
      cancelDel () {
        this.delDialog = false
        this.selectRow = {}
      },
      confirmDel () {
        const self = this
        self.$del(`/api/role/delete/${this.selectRow.roleId}`).then(res => {
          this.selectRow = {}
          this.delDialog = false
          self.setFilter()
          self.$message.success('删除成功')
        })
      },
      toRoleEdit (row = {}, preview = 1) {
        let query = {}
        if (Object.keys(row).length) {
          query.id = row.roleId
          query.preview = preview
        }
        this.$router.push({
          path: '/system/role/edit',
          query: query
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .page {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .filter-card {
      padding: 0 10px;
      background: #fff;
      flex: 0 0 110px;
    }

    .filter-card .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f3f3f3;
      padding: 10px 0;
    }

    .filter-card .header .title {
      font-size: 14px;
    }

    .filter-form {
      padding: 10px 0;
    }

    .table-card {
      margin-top: 10px;
      background: #fff;
      padding: 10px;
      flex: 1;
      overflow-y: scroll;
    }

    .table-card .table-pagination {
      font-size: 14px;
    }
  }

  .del-dialog {
    .dialog-container {
      height: 200px;

      img {
        width: 56px;
        height: 56px;
      }
    }
  }
</style>
